
{namespace esn.soy.networkCreator}

/**
 * @param NumSelected
 */
{template .content}
<div class="esnNetworkCreator">
 <div class="networkInstructions">
    <p>Welcome to the <b>Social Network</b> portion of the survey.</p>

    <p>In this portion of the survey we want you to provide us information about your
      social network within Loughran Hall. Your network should include the <b>15</b> persons
      that <b>first come to mind</b> when you think about your friends and acquaintances in
      Loughran. Use the Residence Autocomplete below to quickly locate your relations
      who live in Loughran.</p>
  </div>

  <div class="autocompleteSectionTitle"><b>Residence Autocomplete</b></div>
  <div class="autocompleteSection">
    <p>This feature allows you to quickly locate relations who live in your dorms. As you
      begin to type their names a list of those people who match what you have typed will
      show. Just click on the name of a relation and they will be added to your social
      network list.</p>

    <table width="600px">
      <td>
        <input class="friendAutocompleteInput"
            label="Type in the first or last name of a resident" />
      </td>
      <td style="text-align: right; vertical-align: bottom;">
        Residents added:{sp}
        <span class="numSelected" style="font-weight: bold;">{$NumSelected}</span>
      </td>
    </table>
  </div>

  <div class="friendListContainer"></div>

  <div class="buttonContainer">
    <div class="backButton"></div>
    <div class="continueButton"></div>
  </div>
</div>
{/template}
